<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../../dashboard/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    //,qyavgdata,zxavgdata,zyavgdata
    setOptions( {xdata,qydata,zxdata,zydata,tdata,qyavgdata,zxavgdata,zyavgdata}  = {}) {
      if(null==qyavgdata){
          qyavgdata = 0;
      }
       if(null==zxavgdata){
          zxavgdata = 0;
      }
        if(null==zyavgdata){
          zyavgdata = 0;
      }
      this.chart.setOption({
        color: ['#76C5AB','#0099CC','#ff99cc'],
        title: {
                text: tdata,
                textStyle: {
                  fontSize: 15,
                  color: "#00FFE3"
                },
                left: '6',
                top: "10"
            },
        grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            //console.log(params,'params')
                 return   params[0].name +"<br>"+
                          params[0].marker +" "+params[0].seriesName + ': ' + params[0].value + '%'+' '+'平均值'+qyavgdata +"<br>"+
                          params[1].marker +" "+params[1].seriesName + ': ' + params[1].value + '%'+' '+'平均值'+zxavgdata +"<br>"+
                          params[2].marker +" "+params[2].seriesName + ': ' + params[2].value + '%'+' '+'平均值'+zyavgdata;
		             // 鼠标移上显示的文字
		             //1.marker
		             //2.后边是显示的文字，一定要加[0](如果想知道为啥log一下看看数据console.log(params))
	              }
    },
    legend: {
        data: ['专用车', '自卸车','牵引车'],
        right: '6',
        top: "10",
        textStyle: {
                fontSize: 15,
                color: "#00FFE3"
                }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            data: xdata
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '牵引车',
            type: 'bar',
            // data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            data: qydata,
            markLine: {
                data: [
                    // {
                    //   type: 'average', 
                    //   name: '平均值'
                    // }
                    {
                      yAxis: qyavgdata
                    }
                ],
                label: {
                    normal: {
                      //formatter: jdata+' (平均值)',             // 这儿设置安全基线
                      position: 'insideEndTop'           
                    }
                  },
              //   label: {
              //   normal: {
              //     formatter: oavgdata[0]+'h (基准工时)',             // 这儿设置安全基线
              //     position: 'insideEndTop'           
              //   }
              // }
            }
        },
        {
            name: '自卸车',
            type: 'bar',
            // data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            data: zxdata,
            markLine: {
                data: [
                    // {type: 'average', name: '平均值'}
                    {
                      yAxis: zxavgdata
                    }
                ],
                label: {
                    normal: {
                      //formatter: jdata+' (平均值)',             // 这儿设置安全基线
                      position: 'insideEndTop'           
                    }
                  },
            }
        },
        {
            name: '专用车',
            type: 'bar',
            // data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 18, 48.7, 18.8, 6.0, 2.3],
            data: zydata,
            markLine: {
                data: [
                    //{type: 'average', name: '平均值'}
                     {
                      yAxis: zyavgdata
                     }
                ],
                label: {
                    normal: {
                      //formatter: jdata+' (平均值)',             // 这儿设置安全基线
                      position: 'insideEndTop'           
                    }
                  },
            }
        }
    ]
     })
    }
  }
}
</script>
